<template name="components">
	<view>
		<scroll-view scroll-y class="page">
			<image src="/static/componentBg.png" mode="widthFix" class="response"></image>
			<view class="nav-list">
				<navigator hover-class='none' :url="'/pages/component/' + item.name" class="nav-li" navigateTo
					:class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
					v-for="(item,index) in elements" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<!-- <button @click="handleLocation">手动授权</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				elements: [{
						title: '操作条',
						name: 'bar',
						color: 'purple',
						cuIcon: 'vipcard'
					},
					{
						title: '导航栏 ',
						name: 'nav',
						color: 'mauve',
						cuIcon: 'formfill'
					},
					{
						title: '列表',
						name: 'list',
						color: 'pink',
						cuIcon: 'list'
					},
					{
						title: '卡片',
						name: 'card',
						color: 'brown',
						cuIcon: 'newsfill'
					},
					{
						title: '表单',
						name: 'form',
						color: 'red',
						cuIcon: 'formfill'
					},
					{
						title: '时间轴',
						name: 'timeline',
						color: 'orange',
						cuIcon: 'timefill'
					},
					{
						title: '聊天',
						name: 'chat',
						color: 'green',
						cuIcon: 'messagefill'
					},
					{
						title: '轮播',
						name: 'swiper',
						color: 'olive',
						cuIcon: 'album'
					},
					{
						title: '模态框',
						name: 'modal',
						color: 'grey',
						cuIcon: 'squarecheckfill'
					},
					{
						title: '步骤条',
						name: 'steps',
						color: 'cyan',
						cuIcon: 'roundcheckfill'
					}
				],
			};
		},
		onLoad() {
			// 初始化页面,执行查看已授权信息
			this.getSettingMess();
		},
		methods: {
			// 执行函数
			getSettingMess() {
				// 获取已授权类别
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							console.log("userLocation位置功能已授权")
							// 如果已授权,直接获取对应参数
							uni.getLocation({
								success(res) {
									console.log(res)
								}
							})
						} else if (!res.authSetting['scope.userLocation']) {
							// 说明此时要获取的位置功能尚未授权,
							// 则设置进入页面时主动弹出，直接授权
							uni.authorize({
								scope: 'scope.userLocation',
								success(res) {
									// 授权成功
									console.log(res)
									// 成功后获取对应的位置参数
									uni.getLocation({
										success(res) {
											console.log(res)
										}
									})
								},
								fail() {
									console.log("位置授权失败")
								}
							})
						}
					},
					fail() {
						console.log("获取授权信息授权失败")
					}
				})
			},
			// 如果初始进入页面时点击了拒绝授权,如需要该权限,需要手动授权
			// 手动授权的触发方法
			handleLocation() {
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							// 再次判断所需权限是否已授权,如已授权则直接使用
							uni.getLocation({
								success(res) {
									console.log(res)
								}
							})
						} else if (!res.authSetting['scope.userLocation']) {
							// 如未授权则重新打开设置页面,进行授权
							uni.showModal({
								//弹出提示框
								title: '是否打开设置页？',
								content: '需要在设置中获取xx信息和xx权限',
								success(res) {
									if (res.confirm) {
										// 用户点击确定按钮
										uni.openSetting({
											// 确认后打开设置页面
											success(res) {
												if (res.authSetting['scope.userLocation']) {
													console.log("手动授权成功")
												} else {
													console.log("手动授权失败")
												}
											},
											fail() {
												console.log("打开设置页面失败")
											}
										})
									} else if (res.cancel) {
										// 用户点击取消按钮
										console.log('用户点击取消');
									}
								},
								fail() {
									console.log("确认取消弹出未弹出")
								}
							});
						}
					},
					fail() {
						console.log("获取已授权信息失败")
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
</style>
